<template>
  <div class="member-container">
    <div class="page-top-form">
      <el-form :inline="true" class="query-form" ref="queryForm" label-position="left" status-icon>
        <el-form-item>
          <el-button type="primary" @click="onAdd" size="small">新 增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="page-content">
      <el-table ref="myTable" :data="tableData" :header-cell-style="{background:'#f2f3f5'}" height="calc(100% - 40px)" border style="width:100%;">
        <el-table-column type="index" label="序号" width="50" align="center" />
        <el-table-column v-for="(item, index) in tableColumns" :key="index" :prop="item.prop" :label="item.label" :min-width="item.minWidth" :show-overflow-tooltip="true" align="center">
          <template slot-scope="scope">
            <div v-if="item.prop === 'img'">
              <el-image class="preference-img" src="http://pond.jgui-list.cn/198a2989d834436b929aa35249cb85fa.png" :preview-src-list="['http://pond.jgui-list.cn/198a2989d834436b929aa35249cb85fa.png']"></el-image>
            </div>
            <div v-else-if="item.prop === 'time'">
              <span>{{ Moment(scope.row[item.prop]).format('YYYY-MM-DD')}}</span>
            </div>
            <div v-else>
              <span>{{ scope.row[item.prop] }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="onEdit(scope.row)" size="small">修改</el-button>
            <el-button type="danger" @click="onDel(scope.row)" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 10px;">
        <el-pagination :total="total" layout="total, sizes, prev, pager, next, jumper"
          :current-page="page"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" :append-to-body="true" width="500px">
      <div>
        <el-form label-width="100px" :inline="true" :model="editForm" size="small">
          <el-form-item label="名称" prop="name">
            <el-input v-model="editForm.name" style="width: 280px;" clearable placeholder="请输入会员名称" />
          </el-form-item>
          <el-form-item label="图片" prop="img">
            <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1"
              :class="uploadDisabled ? 'hided' : ''" 
              accept=".jpg, .jpeg, .png"
              :before-upload="beforeUpload" 
              :on-change="handleChange"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :file-list="uploadImgList"
            >
              <i class="el-icon-plus" />
              <div class="el-upload__tip" slot="tip">上传格式为jpg/jpeg/png文件；大小不超过1M</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="单价" prop="price">
            <el-input v-model="editForm.price" style="width: 280px;" clearable placeholder="请输入单价"/>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="onSave" size="small">保 存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="图片预览" class="preference-img-Dialog" :close-on-click-modal="false" width="450px" :visible.sync="imgPrevDialog">
      <img class="content-info" :src="imgPrevSrc">
    </el-dialog>
  </div>
</template>

<script>
import Moment from 'moment'
import {pageSizes} from '@/utils/table'
export default {
  name: '会员管理',
  components: {
    Moment,
  },
  data() {
      return {
        Moment,
        page: 1,
        pageSize: 20,
        pageSizes,
        total: 0,
        tableColumns: [
          { prop: 'name', label: '名称', minWidth: '15%' },
          { prop: 'img', label: '图片', minWidth: '15%' },
          { prop: 'phone', label: '单价', minWidth: '10%' },
          { prop: 'time', label: '添加时间', minWidth: '10%' }
        ],
        tableData: [
          {name: '用户1', img: '123456789', phone: '18512345678', money: 100, point: 20, status: 1, time: '2023-12-26 11:22:33'},
          {name: '用户2', img: '987654321', phone: '18512345678', money: 100, point: 20, status: 2, time: 123456789},
          {name: '用户2', img: '987654321', phone: '18512345678', money: 100, point: 20, status: 2, time: 123456789},
          {name: '用户2', img: '987654321', phone: '18512345678', money: 100, point: 20, status: 2, time: 123456789},
          {name: '用户2', img: '987654321', phone: '18512345678', money: 100, point: 20, status: 2, time: 123456789},
          {name: '用户2', img: '987654321', phone: '18512345678', money: 100, point: 20, status: 2, time: 123456789},
          {name: '用户2', img: '987654321', phone: '18512345678', money: 100, point: 20, status: 2, time: 123456789},
          {name: '用户2', img: '987654321', phone: '18512345678', money: 100, point: 20, status: 2, time: 123456789},
          {name: '用户2', img: '987654321', phone: '18512345678', money: 100, point: 20, status: 2, time: 123456789},
          {name: '用户2', img: '987654321', phone: '18512345678', money: 100, point: 20, status: 2, time: 123456789},
        ],
        dialogVisible: false,//弹窗
        dialogTitle: '',//弹窗标题
        editForm: {
          name: '',
          img: '',
          price: '',
        },
        uploadImgList: [],
        imgPrevDialog: false,//预览图片-弹窗
        imgPrevSrc: '',//预览图片
      }
    },
    computed: {
      uploadDisabled() {
        return this.uploadImgList.length === 1
      }
    },
    mounted() {
      this.onSearch(1)
    },
    methods: {
      //查询
      onSearch(page) {
        this.page = page ? page : this.page
      },
      //新增
      onAdd() {
        this.dialogVisible = true
        this.dialogTitle = '新增'
        this.uploadImgList = []
        this.editForm = {}
      },
      //修改
      onEdit(row) {
        this.dialogVisible = true
        this.dialogTitle = '修改'
      },
      //删除
      onDel(row) {
        this.$confirm('确认删除?', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // activityDelete({key: row.activityId}).then(res => {
          //   if (res.success) {
          //     this.$message.success('删除成功')
          //     this.onSearch(1)
          //   } else {
          //     this.$message.warning(res.errorMsg)
          //   }
          // }).catch(err => {
          //   this.$message.error('服务器错误')
          // })
        }).catch(() => {
          this.$message({type: 'info',message: '已取消'})       
        })
      },
      //保存
      onSave() {

      },
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg' || file.type === 'image/png'
        const isLt1M = file.size / 1024.0 / 1024.0 < 2.0
        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG、JPEG或PNG 格式!')
        }
        if (!isLt1M) {
          this.$message.error('上传图片大小不能超过 2M!')
        }
        return isJPG && isLt1M
      },
      handleChange(file, fileList) {
        console.log('file--', file)
        this.uploadImgList = [{url: file.url}]
        // getSTSToken({ossType: 'PUBLIC'}).then(tokenRes => {
        //   if (tokenRes.success) {
        //     ossUploadFile(file.raw, tokenRes.result).then(res => {
        //       this.uploadImgList = [{url: res.fileUrl}]
        //     }).catch(err => {
        //       this.uploadImgList = []
        //       this.$message.error('上传失败')
        //     })
        //   }
        // }).catch(err => {
        //   this.uploadImgList = []
        //   this.$message.error('服务器错误')
        // })
      },
      handleRemove(file) {
        this.uploadImgList = []
      },
      //预览
      handlePictureCardPreview(file) {
        this.imgPrevSrc = file.url
        this.imgPrevDialog = true
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.onSearch()
      },
      handleCurrentChange(val) {
        this.page = val
        this.onSearch()
      },
    }
}
</script>
<style scoped>
.hided >>>.el-upload {
  display: none !important;
}
.content-info{
  width: 400px;
  height: 300px;
}
</style>
<style lang="scss" scoped>
.member-container{
  width: 100%;
  height: 100%;
  .page-top-form{
    width: 100%;
    height: 50px;
  }
  .page-content{
    width: 100%;
    height: calc(100% - 50px);
  }
}
.preference-img{
  width: 80px;
  height: 50px;
  cursor: pointer;
}
</style>
